<template>
  <div class="app">
    <a-breadcrumb style="margin-bottom: 10px">
      <a-breadcrumb-item>综治组织/ 指挥中心</a-breadcrumb-item>
    </a-breadcrumb>
    <a-row class="pd20 mt20">
      <a-col :span="6">
        中心名称：
        <a-input
          placeholder="请输入"
          v-model="queryForm.organizationMassDefenceDetailName"
        />
      </a-col>
      <a-col :span="6">
        中心类型：
        <a-select v-model="queryForm.organizationMassDefenceId">
          <a-select-option
            :value="item.id"
            v-for="item in organizationList"
            :key="item.id"
          >
            {{ item.name }}
          </a-select-option>
        </a-select>
      </a-col>
      <a-col :span="6">
        负责人姓名：
        <a-input placeholder="请输入" v-model="queryForm.manager" />
      </a-col>
      <a-col :span="6">
        负责人电话：
        <a-input placeholder="请输入" v-model="queryForm.managerPhone" />
      </a-col>
      <a-col :span="6">
        描述：
        <a-input placeholder="请输入" v-model="queryForm.descStr" />
      </a-col>
      <a-col :span="9">
        成立时间：
        <a-range-picker @change="onChange" v-model="dateRange" />
      </a-col>
      <a-col :span="3">
        <a-button type="primary" @click="getList"> 查询 </a-button>&emsp;&nbsp;
        <a-button @click="cleanQuery">重置</a-button>
      </a-col>
    </a-row>
    <a-row class="pd20 mt20">
      <div class="flex-between">
        <div class="flex-start">
          <a-button
            type="primary"
            @click="addFn"
            v-hasPermi="['zhonghe:zhzx:import']"
            >导入</a-button
          >
          <a-button
            type="primary"
            @click="addFn"
            v-hasPermi="['zhonghe:zhzx:export']"
            >导出</a-button
          >
        </div>
        <div class="flex-end">
          <a-button
            type="primary"
            @click="addFn"
            v-hasPermi="['zhonghe:zhzx:add']"
            >添加</a-button
          >
          <a-button
            v-if="false"
            type="danger"
            @click="delFn"
            v-hasPermi="['zhonghe:zhzx:del']"
            >删除</a-button
          >
        </div>
      </div>
      <a-spin :spinning="loading">
        <a-table
          :scroll="{ x: 500 }"
          :columns="columns"
          :data-source="tableData"
          :pagination="false"
          :row-key="(record) => record.id"
        >
          <template slot="managerPhone" slot-scope="text, record">
            <div class="phone-cell">
              <span>{{
                record.showPhone ? text : $desensitizePhone(text)
              }}</span>
              <a-icon
                :type="record.showPhone ? 'eye-invisible' : 'eye'"
                @click.stop="togglePhoneVisibility(record)"
              />
            </div>
          </template>
          <span slot="status" slot-scope="text, record">
            <a-switch
              :checked="record.status === 0"
              @change="(checked) => onStatusChange(checked, record)"
            />
          </span>
          <span
            slot="action"
            slot-scope="text, record"
            style="white-space: nowrap"
          >
            <a @click="view(record)" v-hasPermi="['zhonghe:zhzx:view']">查看</a>
            <a-divider type="vertical" />
            <a @click="editFn(record)" v-hasPermi="['zhonghe:zhzx:edit']"
              >修改</a
            >
            <a-divider type="vertical" />
            <a
              @click="delFn(record)"
              class="red"
              v-hasPermi="['zhonghe:zhzx:del']"
              >删除</a
            >
          </span>
        </a-table>
        <div class="page_box">
          <a-pagination
            v-model="queryForm.offset"
            :page-size-options="['20', '30', '40', '50']"
            :total="total"
            show-size-changer
            :page-size="queryForm.current"
            @showSizeChange="onShowSizeChange"
            @change="pageChange"
            :show-total="(total) => `共 ${total} 条`"
          ></a-pagination>
        </div>
      </a-spin>
    </a-row>
    <a-modal
      :title="title"
      :visible="dialogVisible"
      width="30%"
      @cancel="dialogVisible = false"
    >
      <a-form :form="form" :label-col="{ span: 5 }" :wrapper-col="{ span: 19 }">
        <a-form-item label="中心名称">
          <template v-if="type === 'View'">
            {{ currentRecord.organizationMassDefenceDetailName }}
          </template>
          <a-input
            v-else
            style="width: 100%"
            v-decorator="[
              'organizationMassDefenceDetailName',
              {
                rules: [{ required: true, message: '请输入中心名称' }],
              },
            ]"
            placeholder="请输入中心名称"
          />
        </a-form-item>
        <a-form-item label="中心类型">
          <template v-if="type === 'View'">
            <!-- {{ currentRecord.organizationMassDefenceId }} -->
            {{
              organizationList &&
              organizationList.find(
                (element) =>
                  element.id === currentRecord.organizationMassDefenceId
              ).name
            }}
          </template>
          <a-select
            v-else
            style="width: 100%"
            @change="getName"
            v-decorator="[
              'organizationMassDefenceId',
              {
                rules: [{ required: true, message: '请选择中心类型' }],
              },
            ]"
            placeholder="请选择中心类型"
          >
            <a-select-option
              v-for="item in organizationList"
              :key="item.id"
              :value="item.id"
            >
              {{ item.name }}
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="中心地址">
          <template v-if="type === 'View'">
            {{ currentRecord.addr }}
          </template>
          <a-input
            v-else
            style="width: 100%"
            v-decorator="[
              'addr',
              {
                rules: [{ required: true, message: '请输入中心地址' }],
              },
            ]"
            placeholder="请输入中心地址"
          />
        </a-form-item>

        <a-form-item label="中心负责人">
          <template v-if="type === 'View'">
            {{ currentRecord.manager }}
          </template>
          <a-input
            v-else
            style="width: 100%"
            v-decorator="[
              'manager',
              {
                rules: [{ required: true, message: '请输入中心负责人' }],
              },
            ]"
            placeholder="请输入中心负责人"
          />
        </a-form-item>

        <a-form-item label="负责人联系电话">
          <template v-if="type === 'View'">
            {{ currentRecord.managerPhone }}
          </template>
          <a-input
            v-else
            style="width: 100%"
            v-decorator="[
              'managerPhone',
              {
                rules: [{ required: true, message: '请输入负责人联系电话' }],
              },
            ]"
            placeholder="请输入负责人联系电话"
          />
        </a-form-item>

        <a-form-item label="成立时间">
          <template v-if="type === 'View'">
            {{ currentRecord.pushTime }}
          </template>
          <a-date-picker
            v-else
            valueFormat="YYYY-MM-DD"
            style="width: 100%"
            v-decorator="[
              'pushTime',
              {
                rules: [{ required: false }],
              },
            ]"
            placeholder="请输入成立时间"
          />
        </a-form-item>
        <a-form-item label="中心描述">
          <template v-if="type === 'View'">
            {{ currentRecord.descStr }}
          </template>
          <a-textarea
            v-else
            style="width: 100%"
            v-decorator="[
              'descStr',
              {
                rules: [{ required: false }],
              },
            ]"
            :rows="4"
            placeholder="请输入中心描述"
          />
        </a-form-item>
      </a-form>
      <template slot="footer">
        <BtnFooter
          :loading="submitLoading"
          :isShowOk="type !== 'View'"
          @cancel="dialogVisible = false"
          @ok="handleSubmit"
        />
      </template>
    </a-modal>
  </div>
</template>

<script>
import crudMixin from "@/mixins/crudMixin";
import BtnFooter from "@/component/btnFooter.vue";
export default {
  mixins: [crudMixin],
  components: {
    BtnFooter,
  },

  data() {
    return {
      organizationList: [],
      dateRange: [],
      // 请求配置 - 这里定义每个操作的请求格式
      requestConfig: {
        Add: {
          method: "post",
          type: "formData", // 新增请求使用 formData 格式
          url: "/government-platform-center/organizationDetail",
        },
        Edit: {
          method: "post",
          type: "formData", // 修改请求使用 JSON 格式
          url: "/government-platform-center/organizationDetail/edit",
        },
        Del: {
          method: "post",
          type: "formData", // 删除请求使用 formData 格式
          url: "/government-platform-center/organizationDetail/deleteById",
        },
        Detail: {
          method: "get",
          type: "json",
          url: "",
        },
        Get: {
          method: "get",
          type: "json",
          url: "/government-platform-center/organizationDetail",
        },
      },
      // 模态框配置
      modalConfig: {
        addTitle: "新增组织",
        editTitle: "修改组织",
        viewTitle: "查看组织",
        deleteConfirm: "确定要删除该组织吗？删除后不可恢复！",
      },

      // 表单对象
      form: this.$form.createForm(this, { name: "coordinated" }),

      // 列配置
      columns: [
        {
          title: "中心ID",
          dataIndex: "id",
          key: "id",
        },
        {
          title: "指挥中心名称",
          dataIndex: "organizationMassDefenceDetailName",
          key: "organizationMassDefenceDetailName",
        },
        {
          title: "指挥中心类型",
          dataIndex: "organizationMassDefenceId",
          key: "organizationMassDefenceId",
          customRender: (text, record, index) => {
            let findOne = this.organizationList.find(
              (item) => item.id === record.organizationMassDefenceId
            );
            return (findOne && findOne.name) || "";
          },
        },
        {
          title: "中心地址",
          dataIndex: "addr",
          key: "addr",
        },
        {
          title: "中心负责人",
          dataIndex: "manager",
          key: "manager",
        },
        {
          title: "负责人联系电话",
          dataIndex: "managerPhone",
          key: "managerPhone",
          scopedSlots: { customRender: "managerPhone" },
          width: 150,
        },
        {
          title: "中心描述",
          dataIndex: "descStr",
          key: "descStr",
        },
        {
          title: "成立时间",
          dataIndex: "pushTime",
          key: "pushTime",
        },
        {
          title: "最近更新时间",
          dataIndex: "updateTime",
          key: "updateTime",
        },
        {
          title: "操作",
          key: "action",
          scopedSlots: { customRender: "action" },
          width: 150,
        },
      ],
    };
  },

  methods: {
    onChangePushTime(date, dateString) {
      this.queryForm.pushTime = dateString;
    },
    getName(val) {
      console.log(val, "val---");
    },
    formatAddData(data = {}) {
      return {
        status: 0,
        ...data,
      };
    },
    addFn() {
      this.add();
    },
    editFn(val) {
      this.edit(val);
    },
    delFn(val) {
      this.del(val);
    },
    // 处理状态改变
    onStatusChange(checked, record) {
      const url = "/government-platform-center/organization/updateStatus";
      const params = {
        id: record.id,
        status: checked ? 1 : 0, // 转换为后端需要的数字类型
      };

      this.$axios
        .post(url, params)
        .then((res) => {
          if (res.data.code === 0) {
            this.$message.success("状态修改成功");
            this.getList();
          } else {
            this.$message.error(res.data.msg || "操作失败");
          }
        })
        .catch((err) => {
          console.error("状态更新错误:", err);
          this.$message.error("操作失败");
        });
    },
    reset() {
      this.dateRange = [];
      this.cleanQuery();
    },
    // 处理日期范围变化
    onChange(dates, dateStrings) {
      if (dates) {
        this.queryForm.startTime = dateStrings[0];
        this.queryForm.endTime = dateStrings[1];
      } else {
        this.queryForm.startTime = null;
        this.queryForm.endTime = null;
      }
    },
    // 获取机构分类
    getOrganizationList() {
      this.$axios
        .get(
          "/government-platform-center/organizationTeam/queryOrganizationTypeList"
        )
        .then((res) => {
          this.organizationList = res.data.data || [];
        });
    },
    togglePhoneVisibility(record) {
      this.$set(record, "showPhone", !record.showPhone);
    },
  },

  mounted() {
    this.getList();
    this.getOrganizationList();
  },
};
</script>

<style lang="scss" scoped>
.ant-row {
  border-radius: 5px;
  background: #fff;
  color: #000;
}

v-deep {
  .ant-table-thead > tr > th {
    color: #000;
    font-weight: bold;
  }
  .ant-table-tbody > tr > td {
    color: #000;
  }
  .el-table thead {
    color: black;
    font-weight: bold;
    background: #fafafa;
  }
  .el-table th.el-table__cell {
    background: #fafafa;
  }
}

.ant-col {
  margin: 10px 0;
}

.ant-select {
  width: 60%;
}

.ant-input {
  width: 60%;
}

@media screen and (max-width: 1300px) {
  .el-input {
    width: 70%;
  }

  .el-select {
    width: 70%;
  }

  .app {
    width: calc(100% - 50px);
  }
}

@media screen and (max-width: 1100px) {
  .el-input {
    width: 90%;
  }

  .el-select {
    width: 90%;
  }
}
.img {
  width: 50px;
  height: 50px;
}
.btn_box {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
}
.flex-between {
  display: flex;
  justify-content: space-between;
}
.flex-start {
  display: flex;
  justify-content: flex-start;
  gap: 10px;
}
.flex-end {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
</style>
